<template>
  <div>
    <van-dialog :show="show" class="modal" :show-close="true">
      <template #title>
        <div class="modal-title">
          {{ $t("person.contact") }}
        </div>
        <van-icon name="cross close-right" @click="show=false"/>
      </template>
      <div class="modal-body">
        <div v-for="(item, index) in contentArr" :key="index">
          {{ index + 1 }}、{{ item.name }} :<a :href="'tel:' + item.val">{{ item.val }}</a>
        </div>
      </div>
      <template #footer>
        <div class="modal-foot">
          <van-button class="modal-conact" @click="onKnow(1)">
          {{$t("person.contanceServicer")}}
       </van-button>
        </div>
      </template>
    </van-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from "@vue/reactivity";
import { contactUs } from "@/api/user";
import { onMounted } from "@vue/runtime-core";
import { getUserInfo } from "@/utils/util"
const show = ref(false);
let contentArr = reactive([]);


async function open() {
  let data = await contactUs().catch((err) => {
    console.log(err);
  });
  Object.assign(contentArr, data.data);
}
onMounted(() => {
  open()
})
const url = ref("")
function onKnow(val) {
  let userInfo = getUserInfo() || {}
  if (userInfo.userId) {
    url.value = `http://service.palmfun.co/index/index/kefu?u=5c6cbcb7d55ca&uid=${userInfo.userId || ''}&name=${userInfo.nickName || ''}&avatar=${userInfo.avatar || ''}`
  } else {
    url.value = `http://service.palmfun.co/index/index/kefu?u=5c6cbcb7d55ca`
  }
  show.value = !show.value;
  if(val){
    window.open(url.value)
  }
}
defineExpose({
  onKnow,
});
</script>

<style lang="less" scoped>
.modal {
  text-align: center;
  .close-right{
    position:absolute;
    right:10px;
    top:10px;
    font-size: 20px;
  }
  &-title {
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #000000;
    line-height: 15px;
  }
  &-body {
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #000000;
    line-height: 20px;
    margin-top: 17px;
    margin-bottom: 20px;
    text-align: center;
    div:last-child {
      margin-top: 5px;
    }
  }
  &-konw {
    display: inline-block;
    width: 92px;
    height: 22px;
    background: #444444;
    border-radius: 9px;
    line-height: 12px;
    font-size: 11px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #ffffff;
    line-height: 22px;
  }
  &-conact {
    padding: 10px;
    display: inline-block;
    height: 22px;
    background: #ed008c;
    border-radius: 9px;
    line-height: 12px;
    font-size: 12px;
    font-weight: bold;
    color: #ffffff;
    line-height: 22px;
    margin-left: 5px;
  }
  &-foot {
    margin-bottom: 11px;
    text-align: center;
  }
}
</style>
